<template>
  <div class="forewarning-warp">
    <div class="forewarning-item">
      <div class="info-title">
        <div class="title">贵阳龙洞堡机场</div>
        <div class="tag">
          <el-tag class="tagItem" size="medium" type="info">公共场所</el-tag>
          <el-tag class="tagItem" size="medium" type="success">启用</el-tag>
        </div>
        <div class="time-box">
          <span class="label-color">申领时间：</span>
          <span class="link-color">2020-04-14 16:10:55</span>
        </div>
      </div>
      <div class="info-detail">
        <div class="col-item long-msg">
          <div class="label-color">场所地址：</div>
          <div>贵阳市南明区油榨街富源北路213号</div>
        </div>
        <div class="col-item long-msg">
          <div class="label-color">所属机构：</div>
          <div>云上数联（贵州）信息技术有限责任公司</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">申领人：</div>
          <div>张三</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">申领人：</div>
          <div>张三</div>
        </div>
        <div class="col-item long-msg">
          <div class="label-color">统一社会信用代码：</div>
          <div>91520191MAAJU1N3XX</div>
        </div>
        <div class="col-item long-msg">
          <div class="label-color">申领人联系方式：</div>
          <div>15920800344</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">需要健康申报：</div>
          <div>是</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">需要反馈提示音：</div>
          <div>是</div>
        </div>
      </div>
    </div>
    <div class="forewarning-item">
      <div class="info-title">
        <div class="title">SN1234234</div>
      </div>
      <div class="info-detail">
        <div class="col-item long-msg">
          <div class="label-color">场所地址：</div>
          <div>贵阳市南明区油榨街富源北路213号</div>
        </div>
        <div class="col-item long-msg">
          <div class="label-color">所属机构：</div>
          <div>云上数联（贵州）信息技术有限责任公司</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">申领人：</div>
          <div>张三</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">申领人：</div>
          <div>张三</div>
        </div>
        <div class="col-item long-msg">
          <div class="label-color">统一社会信用代码：</div>
          <div>91520191MAAJU1N3XX</div>
        </div>
        <div class="col-item long-msg">
          <div class="label-color">申领人联系方式：</div>
          <div>15920800344</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">需要健康申报：</div>
          <div>是</div>
        </div>
        <div class="col-item short-msg">
          <div class="label-color">需要反馈提示音：</div>
          <div>是</div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'ForewarningMsg',
  data() {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.forewarning-warp{
  padding: 20px;
}

.forewarning-item{
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 1.8rem;
  .info-title{
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    align-items: center;

    .title{
      font-size: 16px;
    }

    .tag{
      padding: 0 20px;

      .tagItem{
        margin: 0 10px;
      }
    }

    .time-box{
      flex: 1;
      text-align: right;
    }
  }

  .info-detail{
    padding: 10px 0;
    font-size: 12px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items: center;
    .col-item{
      display: flex;
      padding: 5px 0;
      div:first-child{
        width: 115px;
        text-align: right;
      }
    }

    .long-msg{
      width: 35%;
    }

    .short-msg{
      width: 15%;
    }
  }
}
</style>